<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于计协</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="./css/animate.min.css"/>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <link rel="stylesheet" href="./css/css.min.css"/>
    <style type="text/css">
        .swiper-slide {
            transform: rotateZ(0deg);
        }

        .swiper-slide-contain {
            background-size: contain;
        }

        .swiper-slide-cover {
            background-size: cover;
        }

        .swiper-bg1 {
            position: relative;
            background-image: url(./data/images/common/bg1.jpg);
            background-position: center center;
        }

        .swiper-bg2 {
            background-image: url(./data/images/common/bg2.jpg);
            background-position: center center;
        }

        .cmp {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            z-index: 0;
            text-align: center;
        }
        .cmp img,.cmp-inner {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div class="loading-overlay">
    <div class="loading-overlay-list">
        <img src="./img/loading.svg">
        <p>正在加载内容……</p>
    </div>
</div>
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div id="slide1" class="swiper-slide swiper-bg1">
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.3s" src="./data/images-hd/slide1/slide1-come.png"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.5s" src="./data/images-hd/slide1/slide1-carry.png"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.1s" src="./data/images-hd/slide1/slide1-bar.png"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.7s"
                     swiper-animate-delay="0.7s" src="./data/images-hd/slide1/slide1-need.png"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.7s"
                     swiper-animate-delay="0.8s" src="./data/images-hd/slide1/slide1-superman.png"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="slideInDown" swiper-animate-duration="0.5s"
                     swiper-animate-delay="1.2s" src="./data/images-hd/slide1/slide1-logo.png"/>
            </div>
        </div>
        <div id="slide2" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.2s" style="background-image: url(./data/images-hd/slide2/slide2-title.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.4s" style="background-image: url(./data/images-hd/slide2/slide2-intro.webp)">

            </div>
            <div class="cmp ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.6s" style="background-image: url(./data/images-hd/slide2/slide2-staff.webp)">

            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.8s" style="background-image: url(./data/images-hd/slide2/slide2-acquire.webp)">
            </div>
        </div>
        <div id="slide3" class="swiper-slide swiper-bg2">
            <div class="cmp">
                <img class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.1s" src="./data/images-hd/slide3/slide3-staff.webp"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="tada" swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.1s" src="./data/images-hd/slide3/slide3-refinement.webp"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                     swiper-animate-delay="0.3s" src="./data/images-hd/slide3/slide3-misc.webp"/>
            </div>
            <div class="cmp">
                <img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                     swiper-animate-delay="0.8s" src="./data/images-hd/slide3/slide3-post.webp"/>
            </div>
        </div>
        <div id="slide4" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.2s" style="background-image: url(./data/images-hd/slide4/slide4-staff.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.5s" style="background-image: url(./data/images-hd/slide4/slide4-things.webp)">
            </div>
        </div>
        <div id="slide5" class="swiper-slide swiper-bg1">
            <div class="cmp ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide5/slide5-title.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide5/slide5-icon.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s" style="background-image: url(./data/images-hd/slide5/slide5-content.webp)">
            </div>
        </div>
        <div id="slide6" class="swiper-slide swiper-bg1">
            <div class="cmp ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide5/slide5-title.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide5/slide5-icon.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s" style="background-image: url(./data/images-hd/slide6/slide6-content.webp)">
            </div>
        </div>
        <div id="slide7" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide7/slide7-staff.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide7/slide7-things.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.5s" style="background-image: url(./data/images-hd/slide7/slide7-lightbult.webp)">
            </div>
        </div>
        <div id="slide8" class="swiper-slide swiper-bg1">
            <div class="cmp ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide8/slide8-title.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide8/slide8-icon.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s" style="background-image: url(./data/images-hd/slide8/slide8-content.webp)">
            </div>
        </div>
        <div id="slide9" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide9/slide9-staff.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide9/slide9-things.webp)">
            </div>
        </div>
        <div id="slide10" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide10/slide10-staff.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide10/slide10-things.webp)">
            </div>
        </div>
        <div id="slide11" class="swiper-slide swiper-bg1">
            <div class="cmp ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide11/slide11-title.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide11/slide11-icon.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s" style="background-image: url(./data/images-hd/slide11/slide11-content.webp)">
            </div>
        </div>
        <div id="slide12" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide12/slide12-fish.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.3s" style="background-image: url(./data/images-hd/slide12/slide12-word1.webp)">
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s" style="background-image: url(./data/images-hd/slide12/slide12-word2.webp)">
            </div>
        </div>
        <div id="slide13" class="swiper-slide swiper-bg2">
            <div class="cmp ani" swiper-animate-effect="tada" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.1s" style="background-image: url(./data/images-hd/slide13/slide13-title.webp)">
            </div>
            <div class="cmp">
                <img class="cmp-inner ani" swiper-animate-effect="flipInX"
                     swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.3s" src="./data/images-hd/slide13/slide13-wechat.webp"/>
            </div>
            <div class="cmp">
                <img class="cmp-inner ani" swiper-animate-effect="flipInX"
                     swiper-animate-duration="0.5s"
                     swiper-animate-delay="0.5s" src="./data/images-hd/slide13/slide13-qqgroup.webp"/>
            </div>
            <div class="cmp ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                 swiper-animate-delay="0.7s"
                 style="background-image: url(./data/images-hd/slide13/slide13-copyright.webp)">
            </div>
        </div>
    </div>
</div>
<button class="btn-music">
    <img class="icon" src="./img/music.svg"/>
</button>

<audio loop autoplay preload="auto">
    <source src="./data/musics/background.ogg" type="audio/ogg">
</audio>

<script type="text/javascript">
    //界面全部加载完成
    $(window).load(function () {
        //载入完成隐藏载入页面
        $('.loading-overlay').slideUp();
        //处理宽高
        changeWidthHeight();
        var btnMusic = $('.btn-music');
        var bgMusic = $('audio').get(0);
        // 配置按钮点击播放停止事件
        btnMusic.click(function () {
            if (bgMusic.paused) {
                bgMusic.play();
                $(this).removeClass('paused');
            } else {
                bgMusic.pause();
                $(this).addClass('paused');
            }
        });
        //开始播放音乐
        bgMusic.play().catch(function (error) {
            console.log("music play error");
        });

        //载入滑动
        new Swiper('.mySwiper', {
            mousewheel: true,
            direction: "vertical",
            grabCursor: true,
            effect: "coverflow",
            keyboard: true,
            loop:true,
            autoplay: {
                delay: 5000,//5秒切换一次
                disableOnInteraction:false,//不禁止自动切换
            },
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                },
                touchEnd: function (swiper, event) {
                    //点击开始手动播放音乐
                    if (!btnMusic.hasClass('paused') && bgMusic.paused) {
                        bgMusic.play();
                    }
                    if (swiper.isEnd) {
                        showWechat();
                    }
                },
            },
        });
    });
    $(window).resize(function () {
        changeWidthHeight();
    });

    function changeWidthHeight() {
        var width = window.screen.width;
        var height = window.screen.height;
        var basicWidth = 640 * 1.2;
        var basicHeight = 1138;
        //根据宽高判断
        if (basicHeight / basicWidth > height / width) {
            $('.swiper-slide').addClass('swiper-slide-contain')
            $('.swiper-slide').removeClass('swiper-slide-cover')
        } else {
            $('.swiper-slide').removeClass('swiper-slide-contain')
            $('.swiper-slide').addClass('swiper-slide-cover')
        }
    }
</script>
</body>
</html>